<template>
    <div style="width: 95%; margin-left: auto; margin-right: auto;">
      <br>
      <el-card >
        <div>
        <h1 class="el-icon-s-promotion"> <a name="lastanalyse">最近分析</a></h1><br>
        <span >*下述仅为访客的分析记录，如果您不想在此显示自己的分析记录，请登录用户账号后再上传分析*</span>
      </div>
      <br><br><br>
      <el-table
        class="elTable"
        :data="testPage"
        border
        fit
        style="width: 100%; margin-left: auto; margin-right: auto; border-color: black;" 
        :cell-style="{ textAlign: 'center',height:'60px',borderColor:'black' }"
        :header-cell-style="{ textAlign: 'center',color:'black',height:'40px',borderColor:'black'}"
        >
        <el-table-column
          prop="app_name"
          label="APP"
          width="200">
        </el-table-column>
        <el-table-column
          prop="file_name"
          label="文件名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="package_name"
          label="包名">
        </el-table-column>
        <el-table-column
          prop="md5"
          label="MD5-HASH值">
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="分析时间">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.package_name)" type="primary" size="small" icon="el-icon-view" text-align="center">分析报告</el-button>
            <!-- <el-button type="primary" size="small" icon="el-icon-document-remove" text-align="center"></el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" style="text-align: right;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </el-col>
      </el-row>
      </el-card>
    </div>
  </template>
  
<script>
  export default {
    data() {
      return {
        testdata: [],
        baseURL: "http://127.0.0.1:8000",
        packagename:{},
        testPage: [],
        total: 10, //数据的总行数
        currentpage: 1, //当前所在的页数
        pagesize: 10,  //每页显示多少行
      }
    },
    mounted() {
      this.getMessages();
    },

  methods: {
    handleClick(row) {
      this.packagename = {}
      this.packagename.append("package_name",row);
      let that = this;
      that.axios.post(that.baseURL+"#",that.packagename)
      .then(function(res){
        localStorage.setItem("packagename",JSON.stringify(res.data));
        that.$router.push({path:'/demo/main'})
      })
      console.log(row);
    },
    getMessages:function(){
      //记录this的地址
      let that = this
      //使用Axios实现Ajax请求
      that.axios.get(that.baseURL+"/apk/index_details/apks/")
      .then(function(res){
        if(res.status==200){
          //把数据给testdata
          that.testdata = res.data;
          //获取返回记录的总行数
          that.total = res.data.length;
            //获取当前页的数据
            that.getPage();
        }
        //请求成功后执行的函数
        console.log(res.data);
      })
      .catch(function(err){
        //请求失败后执行的函数
        console.log(err)
      })
    },
    //获取当前页的数据
    getPage() {
          //清空testPage中的数据
          this.testPage = [];
          //获取当前页的数据
          for(let i=(this.currentpage - 1)* this.pagesize; i< this.total; i++){
            //遍历数据添加到testPage中
            this.testPage.push(this.testdata[i]);
            //判断是否达到一页的要求
            if (this.testPage.length === this.pagesize) break;
          }
        },
        //分页时修改每页的行数
        handleSizeChange(size) {
          //修改当前每页数据行数
          this.pagesize = size;
          //数据重新分页
          this.getPage();
        },
        handleCurrentChange(pageNumber) {
          //修改当前的页码
          this.currentpage = pageNumber;
          //数据重新分页
          this.getPage();
        },
  },
}
</script>
  
<style>
.el-table--border{
  color: black !important;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
    background-color: rgb(236, 233, 233) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
    background-color: rgb(236, 233, 233)!important;
}
.el-table__body tr:nth-child(even) {  
  background-color: rgb(236, 233, 233); /* 偶数行（斑马线）的默认背景色 */  
}
</style>
  